<template>
	<view class="list-box">
		
		 <listBox :name="name" :word="word" :params='params'>
			 
			 <swiper class="list-swiper" next-margin="10rpx" :style="{height: `${200*rows}rpx`}">
			 	<swiper-item v-for="(n,index) in column" :key="index"><!-- 轮播图几列 -->
			 		<!-- rows=4
			 		 slice(start, end) 获取数组中指定范围元素数组，包头不包尾
			 		 开始下标：0，结束下标4
			 		 index*rows, (index+1)*rows
			 		  :item="item父亲给子，给子绑定数据courseData的每一个item，子组件接受props
			 		 -->
			 		<courseItem v-for="(item,i) in courseData.slice(index*rows,(index+1)*rows)" :key="i" :item="item"></courseItem> <!-- 一列轮播图有几行数据 -->
			 	</swiper-item>
			 </swiper>
			 
		 </listBox>
		 
	</view>
</template>

<script>
	import courseItem from "@/components/common/course-item.vue"
	import courseData from "@/mock/courseData.js"
	import listBox from "./list-box.vue"
	export default{
		components:{courseItem,listBox},
		props: {
			name: {
				type: String,
				default: '热门推荐'
			},
			word: { // HOT
				type: String,
				default: null
			},
			column: { // 默认swiper-item展示2列
				type: Number,
				default: 2
			},
			rows: { // 默认4行
				type: Number,
				default: 4
			},
			courseData: {
				type: Array,
				default: () => courseData
			},
			
			params: Object, // 点击`全部`按钮要向搜索页传递的查询条件
		}
	}
</script>

<style lang="scss">
</style>
